<template>
	<view class="mine-add-way">
		<nav-header title="加我为好友的方式" :showRight="false">

		</nav-header>

		<view class="add-method">
			<up-cell-group>
				<up-cell v-for="(item, index) in methods" :isLink="index==2||index==3" :key="index" :title="item.title"
					@click="selectMethod(index)">
					<template v-slot:value>
						<svg-icon v-if="selectedMethod === index" icon="check-1" :width="36"></svg-icon>
					</template>
				</up-cell>
			</up-cell-group>
		</view>

		<view class="add-way">
			<view class="title">
				<text class="text-sm-Regular">可通过以下方式加我为好友</text>
			</view>
			<up-cell-group>
				<up-cell title="群聊" titleStyle="color:#717680">
					<template v-slot:value>
						<up-switch v-model="group" @change="change" activeColor="#17B26A" size="20"></up-switch>
					</template>
				</up-cell>
			</up-cell-group>

			<up-cell-group>
				<up-cell title="友号" titleStyle="color:#717680">
					<template v-slot:value>
						<up-switch v-model="fnum" @change="change" activeColor="#17B26A" size="20"></up-switch>
					</template>
				</up-cell>
			</up-cell-group>

			<up-cell-group>
				<up-cell title="商号" titleStyle="color:#717680">
					<template v-slot:value>
						<up-switch v-model="bnum" @change="change" activeColor="#17B26A" size="20"></up-switch>
					</template>
				</up-cell>
			</up-cell-group>

			<up-cell-group>
				<up-cell title="好友推荐" titleStyle="color:#717680">
					<template v-slot:value>
						<up-switch v-model="frec" @change="change" activeColor="#17B26A" size="20"></up-switch>
					</template>
				</up-cell>
			</up-cell-group>

			<up-cell-group>
				<up-cell title="附近的人" titleStyle="color:#717680">
					<template v-slot:value>
						<up-switch v-model="near" @change="change" activeColor="#17B26A" size="20"></up-switch>
					</template>
				</up-cell>
			</up-cell-group>

			<up-cell-group>
				<up-cell title="资源广场" titleStyle="color:#717680">
					<template v-slot:value>
						<up-switch v-model="ground" @change="change" activeColor="#17B26A" size="20"></up-switch>
					</template>
				</up-cell>
			</up-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				group: true,
				fnum: true,
				bnum: true,
				frec: true,
				near: true,
				ground: true,
				methods: [{
						title: "允许任何人"
					},
					{
						title: "需要通过验证"
					},
					{
						title: "需要正确回答问题"
					},
					{
						title: "需要正确回答问题并由我确认"
					}
				],
				selectedMethod: 0 // 记录当前选中的单元格索引
			}
		},
		methods: {
			change() {
				const addWayMapping = {
					group: 0, // 群聊
					fnum: 1, // 友号
					bnum: 2, // 商号
					frec: 3 ,// 好友推荐
					near: 4 ,// 附近的人
					ground: 5 // 资源广场
				};

				// 创建一个新的数组来存储当前应该发送的索引值
				let data = {
					addWay: [],
					strategyType:this.selectedMethod
				};

				// 检查每个开关的状态，并根据状态添加或移除索引值
				if (this.group) data.addWay.push(addWayMapping.group);
				if (this.fnum) data.addWay.push(addWayMapping.fnum);
				if (this.bnum) data.addWay.push(addWayMapping.bnum);
				if (this.frec) data.addWay.push(addWayMapping.frec);
				if (this.near) data.addWay.push(addWayMapping.near);
				if (this.ground) data.addWay.push(addWayMapping.ground);

				this.$http({
					url: "/friend/updateAddFriendStrategy",
					method: "POST",
					data: data
				}).then((data) => {
					uni.showToast({
						title: "设置成功",
						icon: "none"
					})
				})
			},
			selectMethod(index) {
				this.saveSelectedMethod(index)
			},
			saveSelectedMethod(index) {
				// 发送请求到后端，保存 selectedMethod
				if (index == 0 || index == 1) {
					let data = {
						userId: this.userStore.userInfo.id,
						strategyType: index
					}
					this.$http({
						url: "/friend/updateAddFriendStrategy",
						method: "POST",
						data: data
					}).then(() => {
						this.selectedMethod = index; // 更新当前选中的单元格索引
						uni.showToast({
							title: "保存成功",
							icon: "none"
						})
					})
				} else {
					uni.navigateTo({
						url: "/pageSubOne/mine-question?index=" + index
					})
				}
			},
			loadSelectedMethod() {
				// 发送请求到后端，获取 selectedMethod
				this.$http({
					url: "/friend/findAddFriendStrategy",
					method: "GET"
				}).then((data) => {
					this.selectedMethod = data.strategyType
					// 根据addWay数组来设置开关状态
					this.group = data.addWay.includes(0);
					this.fnum = data.addWay.includes(1);
					this.bnum = data.addWay.includes(2);
					this.frec = data.addWay.includes(3);
					this.near = data.addWay.includes(4);
					this.ground = data.addWay.includes(5);
				})
			}
		},
		onLoad() {
			this.loadSelectedMethod()
		}
	}
</script>

<style lang="scss" scoped>
	.mine-add-way {
		width: 100vw;
		height: 100vh;


		.add-method {}

		.add-way {
			// margin: 20rpx 30rpx;

			.title {
				padding: 24rpx;
				color: $gray-500;
			}

			.u-cell__body ::deep {
				padding: 5rpx !important;
			}
		}
	}
</style>